import React from 'react';
import { Card, Tabs, Table } from 'antd';
import type { TabsProps } from 'antd';

// 模拟数据
const userData = [
  { key: '1', name: '张三', age: 32, address: '北京', registered: '2023-01-15' },
  { key: '2', name: '李四', age: 45, address: '上海', registered: '2023-02-20' },
  { key: '3', name: '王五', age: 28, address: '广州', registered: '2023-03-10' },
  { key: '4', name: '赵六', age: 51, address: '深圳', registered: '2023-04-05' },
];

const orderData = [
  { key: '1', id: 'ORD-2023-0001', customer: '张三', amount: 1250, status: '已完成', date: '2023-05-01' },
  { key: '2', id: 'ORD-2023-0002', customer: '李四', amount: 2300, status: '处理中', date: '2023-05-02' },
  { key: '3', id: 'ORD-2023-0003', customer: '王五', amount: 850, status: '已完成', date: '2023-05-03' },
  { key: '4', id: 'ORD-2023-0004', customer: '赵六', amount: 4100, status: '已取消', date: '2023-05-04' },
];

// 定义表格列
const userColumns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age' },
  { title: '地址', dataIndex: 'address', key: 'address' },
  { title: '注册日期', dataIndex: 'registered', key: 'registered' },
];

const orderColumns = [
  { title: '订单编号', dataIndex: 'id', key: 'id' },
  { title: '客户', dataIndex: 'customer', key: 'customer' },
  { title: '金额', dataIndex: 'amount', key: 'amount', render: (text: number) => `¥${text}` },
  { title: '状态', dataIndex: 'status', key: 'status' },
  { title: '日期', dataIndex: 'date', key: 'date' },
];

const DataStatisticsPage: React.FC = () => {
  // 标签页配置
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '用户统计',
      children: (
        <Card variant="outlined">
          <div style={{ padding: '20px 0', display: 'flex', justifyContent: 'center' }}>
            <p style={{ fontSize: '18px', color: '#666' }}>这里将显示用户数据统计图表</p>
          </div>
          <Table columns={userColumns} dataSource={userData} pagination={false} />
        </Card>
      ),
    },
    {
      key: '2',
      label: '订单统计',
      children: (
        <Card variant="outlined">
          <div style={{ padding: '20px 0', display: 'flex', justifyContent: 'center' }}>
            <p style={{ fontSize: '18px', color: '#666' }}>这里将显示订单数据统计图表</p>
          </div>
          <Table columns={orderColumns} dataSource={orderData} pagination={false} />
        </Card>
      ),
    },
    {
      key: '3',
      label: '销售分析',
      children: (
        <Card variant="outlined">
          <div style={{ padding: '80px 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <p style={{ fontSize: '18px', color: '#666' }}>这里将显示销售数据分析图表</p>
          </div>
        </Card>
      ),
    },
  ];

  return (
    <div>
      <h1 style={{ marginBottom: '24px' }}>数据统计</h1>
      <Tabs defaultActiveKey="1" items={items} />
    </div>
  );
};

export default DataStatisticsPage;